﻿@{
    ViewBag.Title = "打印存储卡";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script src="~/Content/js/jqprint/jquery.jqprint-0.3.js"></script>
<script src="~/Content/js/qrcode/qrcode.js"></script>
<link href="~/Content/css/PrintCss/PrintStorgeCard.css" rel="stylesheet" media="print" />
<style type="text/css">
    html, body, div, ul, li, p {
        margin: 0;
        padding: 0;
    }

    ul, li {
        list-style: none;
        overflow: hidden;
    }

    /*print*/
    ul {
        margin-top: 5px;
    }

        ul li {
            float: left;
            border: 1px solid #000;
            width: 50%;
            box-sizing: border-box;
            height: 120px;
        }

            ul li::after {
                content: '';
                display: block;
                clear: both;
            }

    li p {
        height: 40px;
        line-height: 40px;
    }

    label {
        padding-left: 15px;
    }

    span {
        font-size: 20px;
        font-weight: bold;
        line-height: 40px;
    }

    #print {
        width: 800px;
        margin: 10px auto;
    }

    .div-col-f {
        float: left;
        height: 40px;
        line-height: 40px;
    }

    .div-col-l {
        width: 70%;
    }

    .div-col-r {
        width: 30%;
    }

    .col-1 {
        border-right: none;
        border-bottom: none;
    }

    .col-2 {
        border-bottom: none;
    }

        .col-2 > div {
            float: left;
        }

        .col-2 .left {
            width: 70%;
        }

        .col-2 .right {
            width: 30%;
        }

        .col-2 .left .barcode {
            height: 80px;
            margin-top: 4px;
            margin-left: 8px;
        }

            .col-2 .left .barcode > img {
                width: 260px;
                height: 80px;
                margin-top: 4px;
            }

        .col-2 .qrcode {
            margin-top: 10px;
        }

    .col-3 {
        border-right: none;
    }

        .col-3 div {
            float: left;
            height: 26px;
            line-height: 20px;
        }

        .col-3 .item-col-1 {
            width: 60%;
        }

        .col-3 .item-col-2 {
            width: 40%;
        }

        .col-3 .item-col-3 {
            width: 100%;
            margin-left: 60%;
        }

    .unit {
        font-size: 14px;
        font-weight: normal;
    }
</style>
<script>
    var data = $.request("data");
    var flag = $.request("flag");
    $(function () {
        getPrintData(data);
        top.$(".content-iframe").css("background-color", "#f9f9f9");
    })
    function btn_print() {
        $("#print").jqprint();
    }
    function getPrintData(regids) {
        var url = "/WareHouse/EnterWareHouse/GetPrintStorgeCardData";
        if (flag == "arc")
        {
            url = "/WareHouse/EnterWareHouse/GetPrintStorgeCardMidData";
        }
        $.GetData({
            url: url,
            param: {regids:regids},
            success: function (data) {
                $.each(JSON.parse(data.data), function (index, value) {
                    value["index"] = index;
                    var html = $("#templet").html().format(value);
                    $("#print").append(html);
                    barcode("#barcode" + index, value.FDouBarCode);
                    makeQrCode("qrcode" + index, value.FDouBarCode);
                    if ((index+1)%4==0)
                    {
                        $("#print").append("<h1></h1>");
                    }
                });
               
            }
        });
    }

    function barcode (item,value) {
        JsBarcode(item, value, { displayValue: true });
    };

    function makeQrCode(item,value) {
        var qrcode = new QRCode(document.getElementById(item), {
            width: 100,
            height: 100
        });
        qrcode.makeCode(value);
    }
    function btn_Return() {
        parent.$.detailClose();
    }
</script>
<div style="position: absolute; top: 22px; right: 8px;">
    <a class="btn btn-default " onclick="btn_print()"><i class="fa fa-print" style="margin-right: 5px; font-size: 13px;"></i>直接打印</a>
    <a class="btn btn-default " onclick="btn_Return()"><i class="fa fa-print" style="margin-right: 5px; font-size: 13px;"></i>返回</a>
</div>
<div class="price-box">

    <div id="templet" style="display:none;">
        <ul>
            <li class="col-1">
                <p>
                    <label style="letter-spacing: 6.8px;">供应商:</label>
                    <span>{FSupplierNO} {FSupplierName}</span>
                </p>
                <div class="div-col-l div-col-f" style="width:70%;">
                    <label>零件编号:</label>
                    <span>{FProductionNO}</span>
                </div>
                <div class="div-col-r div-col-f" style="width:30%;">
                    <label>数量:</label>
                    <span>{FQuantity}</span>件
                </div>
                <p>
                    <label>零件名称:</label>
                    <span>{FProductionName}</span>
                </p>
            </li>

            <li class="col-2">
                <div class="left">
                    <div class="barcode">
                        <img id="barcode{index}">
                    </div>
                    <p>
                        <label>批次号:</label>
                        <span>{FVoucherNo}</span>
                    </p>
                </div>
                <div class="right">
                    <div class="qrcode" id="qrcode{index}"></div>
                </div>
            </li>

            <li class="col-3">
                <div class="item-col-1">
                    <label>容器型号:</label>
                    <span>{FContainerNO}</span>
                </div>
                <div class="item-col-2">
                    <label>数量:</label>
                    <span>{FContainerQuantity}</span>
                    <span class="unit">箱</span>
                </div>
                <div class="item-col-3">
                    <label>容量:</label>
                    <span>{FContent}</span>
                    <span class="unit">件</span>
                </div>

                <div class="item-col-1">
                    <label>托盘型号:</label>
                    <span>{FPalletNO}</span>
                </div>
                <div class="item-col-2">
                    <label>数量:</label>
                    <span>{FPalletQuantity}</span>
                    <span class="unit">托</span>
                </div>
                <div class="item-col-3">
                    <label>容量:</label>
                    <span>{FPalletContent}</span>
                    <span class="unit">箱</span>
                </div>
            </li>
            <li>
                <p>
                    <label>仓库货位:</label>
                </p>
                <div style="height:40px;">
                    <span style="font-size: 40px;margin-left: 60px;">{FStoreSetNO}</span>
                </div>
                <p>
                    <label>生成日期:</label>
                    <span>{FStoreDate} {FStoreTime}</span>
                </p>
            </li>
        </ul>
    </div>
    
    <div id="print">
        
    </div>
 
</div>
